/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-07-14 15:10:40
 * @LastEditors: cuidm
 * @LastEditTime: 2022-10-25 14:37:06
 */

import { deepMix } from '@antv/util';
const iconStyle = {
  fontFamily: 'iconfont',
  fill: '#3C67B8',
  fontSize: 14,
  cursor: 'pointer',
}
export default G6 => {
  G6.registerNode('rect-node', {
    /**
     * 绘制后的附加操作，默认没有任何操作
     * @param  {Object} cfg 节点的配置项
     * @param  {G.Group} group 图形分组，节点中图形对象的容器
     */
    draw(cfg, group) {
      const {label, style, icon, isRoot, isAdd, collapsed = false} = cfg;
      let labelWidth = G6.Util.getTextSize(cfg.label, 14)[0];
      const collapsedWidth = collapsed ? 25 : 0;
      const height = 26;
      const midHeight = height / 2 + 7;
      const keyShape = group.addShape('rect', {//最外层边框
        attrs: {
          x: 0,
          y: 0,
          width: isRoot ? labelWidth + 55 + collapsedWidth : labelWidth + 30 + collapsedWidth,
          height: height,
          cursor: 'pointer',
          fill: '#ffffff',
          stroke: '#3056E3',
          radius: 2,
          lineWidth: 1,
        },
        draggable: true,
        name: 'big-rect-shape',
      });

      group.addShape('text', {//左侧图标
        attrs: {
          x: 5,
          y: height / 2 + 7,
          fontFamily: 'iconfont',
          text: icon,
          fill: '#3C67B8',
          fontSize: 14,
          cursor: 'pointer',
        },
        draggable: true,
        name: 'icon-shape'
      });

      group.addShape('text', {//中间文字
        attrs: {
          text: label,
          x: 25,
          y: height / 2,
          fontSize: 14,
          fontWeight: 700,
          textAlign: 'left',
          textBaseline: 'middle',
          fill: '#666666',
          cursor: 'pointer',
        },
        draggable: true,
        name: 'name-text-shape',
      });

      if(!isRoot && collapsed) {
        group.addShape('rect', {//下级图标左侧粗线
          attrs: {
            x: 30 + labelWidth,
            y: 0,
            width: 1,
            height: height,
            fill: '#3056E3',
            cursor: 'pointer',
          },
          draggable: true,
          name: 'left-border-shape',
        });
      
        group.addShape('text', {//展开下级图标
          attrs: {
            x: 35 + labelWidth,
            y: midHeight,
            text: `\ue6b2`,
            ...iconStyle
          },
          draggable: true,
          name: 'child-icon-shape'
        });
      }

      if(isRoot && isAdd) {
        group.addShape('rect', {//添加节点图标左侧粗线
          attrs: {
            x: 30 + labelWidth + collapsedWidth,
            y: 0,
            width: 1,
            height: height,
            fill: '#3056E3',
            cursor: 'pointer',
          },
          draggable: true,
          name: 'left-border-shape',
        });
        group.addShape('text', {//添加节点图标
          attrs: {
            x: 35 + labelWidth + collapsedWidth,
            y: midHeight,
            text: `\ue636`,
            ...iconStyle
          },
          draggable: true,
          name: 'add-icon-shape'
        });
      }
      group.sort();
      return keyShape;
    },
    /**
     * 响应节点的状态变化。
     * 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档
     * @param  {String} name 状态名称
     * @param  {Object} value 状态值
     * @param  {Node} node 节点
     */
    setState (name, value, node) {
        const group = node.getContainer();
        const rect = group.getFirst();
        const textShape = group.getChildByIndex(2);
        if (name === 'active' || name === 'selected') {
          rect.attr({
            stroke: value ? 'rgba(22, 101, 249, .3)' : '#3056E3',
            fill: value ? 'rgba(22, 101, 249, 1)' : '#ffffff',
            lineWidth: value ? 3 : 1,
            fillOpacity: value ? 0.3 : 1,
          });
          textShape?.attr({
            fill: value ? '#333' : '#666'
          })
        }
    },
  }, 'single-node'); 
  G6.registerNode('center-node', {
    /**
     * 绘制后的附加操作，默认没有任何操作
     * @param  {Object} cfg 节点的配置项
     * @param  {G.Group} group 图形分组，节点中的图形对象的容器
     */
    afterDraw(cfg, group) {
      const { size, icon} = cfg;
      const r = size / 2;
      const y = 0;
      const back1 = group.addShape('circle', {
        zIndex: -3,
        attrs: {
          x: 0,
          y,
          r,
          fill: cfg.color,
          opacity: 0.6,
        },
        draggable: true,
        name: 'back1-shape',
      });
      const back2 = group.addShape('circle', {
        zIndex: -2,
        attrs: {
          x: 0,
          y,
          r,
          fill: cfg.color,
          opacity: 0.6,
        },
        draggable: true,
        name: 'back2-shape',
      });
      const back3 = group.addShape('circle', {
        zIndex: -1,
        attrs: {
          x: 0,
          y,
          r,
          fill: cfg.color,
          opacity: 0.6,
        },
        draggable: true,
        name: 'back3-shape',
      });
      group.addShape('text', {
          zIndex: 0,
          attrs: {
              x: 0,
              y,
              fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
              textAlign: 'center',
              textBaseline: 'middle',
              text: icon,
              fontSize: 15,
              fill: '#fff',
              cursor: 'pointer',
          },
          draggable: true,
          // must be assigned in G6 3.3 and later versions. it can be any value you want
          name: 'text-shape',
      });
      group.sort(); // Sort according to the zIndex
      back1.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: 0,
          repeat: true, // repeat
        },
      ); // no delay
      back2.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: 1000,
          repeat: true, // repeat
        },
      ); // 1s delay
      back3.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: 2000,
          repeat: true, // repeat
        },
      ); // 3s delay
    },
  },
  'circle',
  );
}